<script lang="ts" name="SvgIcon" setup>
import { computed } from 'vue'

const props = defineProps({
  prefix: {
    type: String,
    default: 'icon',
  },
  name: {
    type: String,
    required: true,
  },
  color: {
    type: String,
    default: '#333',
  },
  size: {
    type: String,
    default: '24',
  },
  class: {
    type: String,
    default: '',
  },
})
const svgClass = computed(() => {
  return props.name ? `svg-icon icon-${props.name} ${props.class}` : `svg-icon ${props.class}`
})
</script>

<template>
  <svg :class="svgClass" v-bind="$attrs" :style="{ color: color, fontSize: size }">
    <path
      d="M847.3 702.3H176.7V300.8h620.7c27.6 0 50 22.4 50 50v351.5h-0.1zM595.8 300.8c0-46.3-37.5-83.8-83.8-83.8H176.7v83.8h419.1"
      fill="#CE9F06"
      p-id="2452"
    ></path>
    <path d="M260.5 590.4V339h503v251.4h-503z" fill="#FFFFFF" p-id="2453"></path>
    <path
      d="M847.3 755.4V429.8c0-23.1-18.8-41.9-41.9-41.9H218.6c-23.1 0-41.9 18.8-41.9 41.9v325.5c0 28.5 23.1 51.7 51.7 51.7h567.3c28.5 0.1 51.6-23.1 51.6-51.6z"
      fill="#FFCD2C"
      p-id="2454"
    ></path>
  </svg>
</template>

<style lang="less" scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
  overflow: hidden;
}
</style>
